<template>
	<!-- <image src="../../static/residual/glass-window.png" mode=""></image> -->
  <view class="waste-detail">
    <!-- Header background -->
    <view class="header" :style="{ backgroundColor: bgColor }">
      <text class="header-title">{{ currentType.title }}</text>
    </view>

    <!-- Main content area -->
    <view class="content">
      <!-- Classification introduction card -->
      <view class="intro-card">
        <image :src="currentType.icon" class="type-icon" mode="aspectFit" />
        <text class="type-title">{{ currentType.title }}</text>
        <text class="type-desc">{{ currentType.description }}</text>
      </view>

      <!-- Handling method -->
      <view class="method-card">
        <text class="section-title">处理方法：</text>
        <text class="method-text">{{ currentType.method }}</text>
      </view>

      <!-- Common items list -->
      <view class="items-card">
        <text class="section-title">常见物品</text>
		<view style="height: 20rpx;"></view>
        <view class="items-grid">
          <view v-for="item in currentType.commonItems" :key="item.name" class="item">
            <image :src="item.icon" mode="aspectFit" class="item-icon" />
            <text class="item-name">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- Tips -->
      <view class="tips-card">
        <text class="section-title">注意事项</text>
		<view style="height: 19rpx;"></view>
        <view v-for="tip in currentType.tips" :key="tip" class="tip-item">
          <text class="tip-dot">• <text class="tip-text">{{ tip }}</text> </text>
          
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const handleError = (message: string) => {
  console.error(message);
  uni.showToast({
    title: '加载失败，请重试',
    icon: 'none'
  });
}

// Define types
interface CommonItem {
  name: string
  icon: string
}

interface WasteType {
  id: string
  title: string
  icon: string
  description: string
  method: string
  commonItems: CommonItem[]
  tips: string[]
}

// Waste classification data
const wasteTypes = reactive<Record<string, WasteType>>({
  'bone': {
    id: 'bone',
    title: '骨头类垃圾',
    icon: '/static/kitchen/bone.png',
    description: '骨头类垃圾是指各类动物骨骼，包括鱼骨、鸡骨、猪骨等。这类垃圾具有一定的营养价值，经过处理后可以制成饲料或有机肥料。',
    method: '建议将骨头类垃圾沥干水分后，装入专门的厨余垃圾袋中投放。大块骨头建议先将其敲碎，以便处理。',
    commonItems: [
      { name: '鱼骨', icon: '/static/kitchen/fish-bone.png' },
      { name: '鸡骨', icon: '/static/kitchen/chicken-bone.png' },
      { name: '排骨', icon: '/static/kitchen/pork-bone.png' }
    ],
    tips: [
      '投放前请将骨头与其他垃圾分开',
      '尽量去除附着的肉类和其他食物残渣',
      '不要将骨头直接倒入下水道',
      '大型骨头建议先处理成小块再投放'
    ]
  },
  'kitchen': {
    id: 'kitchen',
    title: '厨余垃圾',
    icon: '/static/kitchen/leftovers.png',
    description: '厨余垃圾是指日常生活中产生的食物残渣、剩菜剩饭等易腐烂的生物质废弃物。',
    method: '将厨余垃圾沥干水分后，放入专门的厨余垃圾桶中。有条件的地方可以进行堆肥处理。',
    commonItems: [
      { name: '剩饭', icon: '/static/kitchen/rice.png' },
      { name: '剩菜', icon: '/static/kitchen/vegetables.png' },
      { name: '茶叶渣', icon: '/static/kitchen/tea.png' },
      { name: '咖啡渣', icon: '/static/kitchen/coffee.png' }
    ],
    tips: [
      '投放前尽量沥干水分',
      '去除包装物后再投放',
      '不要混入塑料袋等其他垃圾',
      '建议使用专门的厨余垃圾袋'
    ]
  },
  'other': {
    id: 'other',
    title: '其他厨余垃圾',
    icon: '/static/kitchen/other.png',
    description: '除了常见的厨余垃圾外，还包括一些特殊的厨余废弃物，如宠物饲料、过期食品等。',
    method: '根据具体物品类型进行分类投放，如有包装物需要先行分离。',
    commonItems: [
      { name: '宠物饲料', icon: '/static/kitchen/pet-food.png' },
      { name: '过期食品', icon: '/static/kitchen/expired-food.png' },
      { name: '调味品', icon: '/static/kitchen/seasoning.png' }
    ],
    tips: [
      '注意查看食品是否过期',
      '将包装物与内容物分开处理',
      '液态调味品需要倒掉后再处理包装',
      '不要将药品当作厨余垃圾处理'
    ]
  },
  'vegetable': {
    id: 'vegetable',
    title: '蔬菜果皮',
    icon: '/static/kitchen/peel.png',
    description: '蔬菜果皮是指在食用水果、蔬菜时产生的外皮、叶片等有机废弃物。这类垃圾易腐烂，但可以制成有机肥料。',
    method: '将果皮、菜叶等清洗后沥干，放入专门的厨余垃圾桶中。可以考虑自行堆肥或交由专业处理。',
    commonItems: [
      { name: '水果皮', icon: '/static/kitchen/fruit-peel.png' },
      { name: '菜叶', icon: '/static/kitchen/leaves.png' },
      { name: '根茎', icon: '/static/kitchen/roots.png' }
    ],
    tips: [
      '尽量将果皮洗净后再投放',
      '去除标签、包装等非有机物',
      '腐烂的果蔬要及时处理',
      '可以考虑自制堆肥'
    ]
  },
  'electronics': {
    id: 'electronics',
    title: '电子产品类',
    icon: '/static/recyclable/electr.png',
    description: '电子产品类垃圾包括废弃的电器、电子设备及其零部件。这些产品通常含有可回收的金属和塑料，以及一些有害物质。',
    method: '将电子产品送至专门的回收点或参与生产商的回收计划。大型电器可联系回收商上门收集。',
    commonItems: [
      { name: '手机', icon: '/static/recyclable/smartphone.png' },
      { name: '电脑', icon: '/static/recyclable/computer.png' },
      { name: '电视', icon: '/static/recyclable/tv.png' }
    ],
    tips: [
      '请先删除设备中的个人数据',
      '电池应单独回收处理',
      '大型电器请联系专业回收商处理',
      '不要将电子产品丢入普通垃圾桶'
    ]
  },
  'glass': {
    id: 'glass',
    title: '废品玻璃类',
    icon: '/static/recyclable/glass.png',
    description: '废品玻璃类包括各种玻璃制品，如玻璃瓶、玻璃杯等。玻璃是可以无限次回收利用的材料，回收后可以制成新的玻璃制品。',
    method: '清洗干净后，放入专门的玻璃回收箱或送至回收站。大块玻璃应妥善包裹，避免造成伤害。',
    commonItems: [
      { name: '玻璃瓶', icon: '/static/recyclable/glass-bottle.png' },
      { name: '玻璃杯', icon: '/static/recyclable/glass-cup.png' },
      { name: '玻璃窗', icon: '/static/recyclable/glass-window.png' }
    ],
    tips: [
      '回收前请清洗干净',
      '小心处理破碎的玻璃',
      '不同颜色的玻璃应分开回收',
      '不要将陶瓷、镜子等非玻璃制品混入'
    ]
  },
  'metals': {
    id: 'metals',
    title: '金属类',
    icon: '/static/recyclable/metals.png',
    description: '金属类垃圾包括各种金属制品，如易拉罐、金属罐头盒等。金属是重要的可回收资源，可以被反复利用。',
    method: '清洗干净后，压扁（如果可能的话），放入金属回收箱或送至回收站。大型金属物品可联系专业回收商处理。',
    commonItems: [
      { name: '易拉罐', icon: '/static/recyclable/can.png' },
      { name: '金属罐头', icon: '/static/recyclable/tin.png' },
      { name: '金属餐具', icon: '/static/recyclable/cutlery.png' }
    ],
    tips: [
      '回收前请清洗干净',
      '尽可能将金属物品压扁，节省空间',
      '注意分离混合材料的物品',
      '大型金属物品请联系专业回收商'
    ]
  },
  'paper': {
    id: 'paper',
    title: '废纸类',
    icon: '/static/recyclable/paper.png',
    description: '废纸类包括各种纸制品，如报纸、杂志、纸箱等。回收废纸可以节省树木资源，减少环境污染。',
    method: '将废纸分类整理，去除不可回收的部分（如塑料封面），捆扎好后放入废纸回收箱或送至回收站。',
    commonItems: [
      { name: '报纸', icon: '/static/recyclable/newspaper.png' },
      { name: '纸箱', icon: '/static/recyclable/cardboard.png' },
      { name: '书本', icon: '/static/recyclable/book.png' }
    ],
    tips: [
      '回收前请去除塑料、金属等非纸质部分',
      '保持废纸干燥，避免受潮',
      '油污严重的纸张不宜回收',
      '机密文件建议粉碎后再回收'
    ]
  },
  'plastics': {
    id: 'plastics',
    title: '塑料制品类',
    icon: '/static/recyclable/plastics.png',
    description: '塑料制品类包括各种塑料容器、包装袋等。塑料回收可以减少环境污染，节省石油资源。',
    method: '清洗干净并晾干后，按照塑料类型分类，放入相应的回收箱或送至回收站。',
    commonItems: [
      { name: '塑料瓶', icon: '/static/recyclable/plastic-bottle.png' },
      { name: '塑料袋', icon: '/static/recyclable/plastic-bag.png' },
      { name: '塑料餐盒', icon: '/static/recyclable/plastic-container.png' }
    ],
    tips: [
      '回收前请清洗干净并晾干',
      '注意识别塑料类型，进行分类回收',
      '压扁塑料瓶以节省空间',
      '避免回收污染严重或复合材料的塑料制品'
    ]
  },
  'textile': {
    id: 'textile',
    title: '纺织物类',
    icon: '/static/recyclable/textile.png',
    description: '纺织物类包括废旧衣物、床单、窗帘等织物制品。回收纺织物可以节省资源，减少环境污染。',
    method: '清洗干净并晾干后，可以送至专门的旧衣回收箱或慈善机构。破损严重的纺织物可送至回收站作为再生原料。',
    commonItems: [
      { name: '旧衣服', icon: '/static/recyclable/clothes.png' },
      { name: '床单', icon: '/static/recyclable/bedsheet.png' },
      { name: '毛巾', icon: '/static/recyclable/towel.png' }
    ],
    tips: [
      '回收前请清洗干净并晾干',
      '将可穿着的衣物捐赠给慈善机构',
      '破损严重的纺织物可作为再生原料回收',
      '注意分离纽扣、拉链等非纺织物部分'
    ]
  },
  'bulb': {
    id: 'bulb',
    title: '灯泡',
    icon: '/static/hazardous/bulb.png',
    description: '灯泡属于有害垃圾，特别是含汞的节能灯和荧光灯。不当处理会对环境造成污染。',
    method: '将废旧灯泡小心包裹，避免破碎，送至专门的有害垃圾回收点或者参与生产商的回收计划。',
    commonItems: [
      { name: '节能灯', icon: '/static/hazardous/energy-saving-bulb.png' },
      { name: '荧光灯管', icon: '/static/hazardous/fluorescent-tube.png' },
      { name: 'LED灯泡', icon: '/static/hazardous/led-bulb.png' }
    ],
    tips: [
      '小心处理，避免灯泡破碎',
      '不要将灯泡丢入普通垃圾桶',
      '白炽灯泡可以作为其他垃圾处理',
      '大量废旧灯泡建议联系专业回收商'
    ]
  },
  'battery': {
    id: 'battery',
    title: '废弃电池',
    icon: '/static/hazardous/cell.png',
    description: '废弃电池含有重金属等有害物质，不当处理会严重污染环境。',
    method: '将废弃电池收集后，送至专门的电池回收箱或有害垃圾回收点。大型电池（如汽车电池）应联系专业回收商处理。',
    commonItems: [
      { name: '干电池', icon: '/static/hazardous/dry-cell.png' },
      { name: '纽扣电池', icon: '/static/hazardous/button-cell.png' },
      { name: '充电电池', icon: '/static/hazardous/rechargeable-battery.png' }
    ],
    tips: [
      '不要将电池与其他垃圾混合',
      '避免电池接触水或受潮',
      '大型电池请联系专业回收商处理',
      '鼓励使用可充电电池，减少废弃电池产生'
    ]
  },
  'household': {
    id: 'household',
    title: '生活类有害垃圾',
    icon: '/static/hazardous/drug.png',
    description: '生活类有害垃圾包括过期药品、化妆品、杀虫剂等，这些物品含有对环境和健康有害的物质。',
    method: '将这些物品分类收集，密封保存，送至专门的有害垃圾回收点或参与药店、超市的回收计划。',
    commonItems: [
      { name: '过期药品', icon: '/static/hazardous/medicine.png' },
      { name: '化妆品', icon: '/static/hazardous/cosmetics.png' },
      { name: '杀虫剂', icon: '/static/hazardous/insecticide.png' }
    ],
    tips: [
      '不要将有害垃圾倒入下水道',
      '保持原包装，避免泄漏',
      '过期药品可送回药店回收',
      '化妆品容器清洗后可作为可回收物处理'
    ]
  },
  'paint': {
    id: 'paint',
    title: '油漆类',
    icon: '/static/hazardous/paint.png',
    description: '油漆类垃圾包括废弃的油漆、涂料、稀释剂等，这些物质含有挥发性有机物和重金属，对环境有害。',
    method: '将油漆类废弃物密封保存，送至专门的有害垃圾回收点。大量油漆废弃物应联系专业处理机构。',
    commonItems: [
      { name: '油漆桶', icon: '/static/hazardous/paint-can.png' },
      { name: '涂料', icon: '/static/hazardous/coating.png' },
      { name: '稀释剂', icon: '/static/hazardous/thinner.png' }
    ],
    tips: [
      '保持容器密封，避免泄漏和挥发',
      '不要将油漆倒入下水道或土壤',
      '空的油漆桶晾干后可作为金属回收',
      '使用水性漆代替油性漆，减少有害废弃物'
    ]
  },
  'non-recyclable': {
    id: 'non-recyclable',
    title: '无法再生用品',
    icon: '/static/residual/CannotRecycleSupplies.png',
    description: '无法再生用品是指那些目前技术条件下无法或难以回收利用的物品，这些物品最终会被填埋或焚烧处理。',
    method: '将这些物品作为其他垃圾处理，放入其他垃圾桶或垃圾袋中，由环卫部门统一收集处理。',
    commonItems: [
      { name: '卫生纸', icon: '/static/residual/tissue.png' },
      { name: '尿不湿', icon: '/static/residual/diaper.png' },
      { name: '胶带', icon: '/static/residual/tape.png' }
    ],
    tips: [
      '尽量减少使用一次性用品',
      '选择可降解或可回收的替代品',
      '正确分类，不要混入可回收物',
      '保持干燥，减少异味'
    ]//李明杰：6-7 冯浩：3-4 
  },
  'ceramics': {
    id: 'ceramics',
    title: '灰土陶瓷',
    icon: '/static/residual/ceramics.png',
    description: '灰土陶瓷类垃圾包括废弃的陶瓷制品、砖块、瓦片等。这些物品通常不可回收，但可以作为建筑材料再利用。',
    method: '将破碎的陶瓷制品包裹好，以防割伤他人，然后作为其他垃圾处理。大量的灰土陶瓷废弃物可联系专业回收商处理。',
    commonItems: [
      { name: '陶瓷碗碟', icon: '/static/residual/ceramic-dish.png' },
      { name: '砖块', icon: '/static/residual/brick.png' },
      { name: '瓦片', icon: '/static/residual/tile.png' }
    ],
    tips: [
      '小心处理尖锐边缘，避免伤人',
      '大件陶瓷制品可考虑捐赠或二手出售',
      '不要将陶瓷制品混入玻璃回收',
      '建筑垃圾应联系专门的处理机构'
    ]
  },
  'disposable': {
    id: 'disposable',
    title: '一次性餐具',
    icon: '/static/residual/DisposableTableware.png',
    description: '一次性餐具主要指塑料餐具、木质筷子等一次性使用的餐饮用具。这些物品使用后通常难以回收，会对环境造成负担。',
    method: '使用后的一次性餐具应作为其他垃圾处理，放入其他垃圾桶中。如果是可降解材质，可以按照降解垃圾的方式处理。',
    commonItems: [
      { name: '塑料餐盒', icon: '/static/residual/plastic-food-container.png' },
      { name: '一次性筷子', icon: '/static/residual/disposable-chopsticks.png' },
      { name: '塑料吸管', icon: '/static/residual/plastic-straw.png' }
    ],
    tips: [
      '尽量使用可重复使用的餐具',
      '选择可降解的一次性餐具',
      '外卖时选择不要餐具',
      '正确分类，不要混入可回收物'
    ]
  },
  'misc': {
    id: 'misc',
    title: '其他类垃圾',
    icon: '/static/residual/other.png',
    description: '其他类垃圾是指除了可回收物、厨余垃圾、有害垃圾之外的其他生活垃圾。这类垃圾通常难以回收利用，最终会被填埋或焚烧。',
    method: '将这些垃圾放入其他垃圾桶或垃圾袋中，由环卫部门统一收集处理。在条件允许的情况下，可以考虑垃圾分类，减少其他垃圾的数量。',
    commonItems: [
      { name: '烟头', icon: '/static/residual/cigarette-butt.png' },
      { name: '橡皮泥', icon: '/static/residual/play-dough.png' },
      { name: '胶带', icon: '/static/residual/tape.png' }
    ],
    tips: [
      '尽量减少产生其他垃圾的数量',
      '正确分类，不要将可回收物混入',
      '保持干燥，减少异味',
      '考虑购买耐用品，减少一次性用品使用'
    ]
  }
})

const currentType = ref<WasteType>({} as WasteType)
const bgColor = ref('')

onMounted(() => {
  try {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = currentPage.$page?.options;

    if (!options) {
      throw new Error('Unable to get page options');
    }

    const type = options.type as string;
    const color = decodeURIComponent(options.color || '#ffffff');
    const title = decodeURIComponent(options.title || '垃圾详情');

    if (type && wasteTypes[type]) {
      currentType.value = wasteTypes[type];
    } else {
      console.warn('未找到对应的垃圾类型:', type);
      // Set a default type
      currentType.value = wasteTypes['kitchen']; // Using 'kitchen' as a default type
    }

    bgColor.value = color;
    uni.setNavigationBarTitle({ title: title });
  } catch (error) {
    console.error('Error in onMounted:', error);
    handleError('加载页面数据时出错');
  }
})
</script>

<style>
.waste-detail {
  min-height: 100vh;
  background-color: #f0f0f0;
}

.header {
  padding: 40rpx;
  color: white;
}

.header-title {
  font-size: 48rpx;
  font-weight: bold;
}

.content {
  padding: 40rpx;
}

.intro-card, .method-card, .items-card, .tips-card {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.type-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.type-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.type-desc, .method-text {
  font-size: 28rpx;
  line-height: 1.5;
  color: #333;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
}

.items-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
	display: flex;
	flex-direction: column;
	width: 30%;
	text-align: center;
	margin-bottom: 30rpx;
}

.item-icon {
margin-left: 50rpx;
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
  align-items: center;
  justify-items: center;
}

.item-name {
  font-size: 24rpx;
  color: #666;
}

.tip-item {
  display: flex;
  margin-bottom: 20rpx;
}

.tip-dot {
  margin-right: 20rpx;
  color: #2c3e50;
  font-size: 40rpx;
}

.tip-text {
  font-size: 34rpx;
  color: #333;
}
</style>